About this website

 

How was this site constructed?

 

I wrote the basic structure of every page in this site using HTML, JavaScript, CSS, and HaimML (see below). All of the articles to the right of the navigation menu however were written in Microsoft Word which were then saved as HTML files. Some of the page sources was built from standard examples I found on www.w3schools.com. The photo gallery in the “Adventures” page was constructed using the “Lightbox CSS Gallery” example found at https://usejquery.com/css/css-gallery.

 

What’s HaimML?

 

HaimML is a language that I created that integrates with HTML, CSS, and JavaScript. It’s interpreted by my “HaimML interpreter” program that looks for all HaimML functions sitting inside a file and executes their purpose by replacing them with appropriate HTML, CSS, and JavaScript code. The most important function that this language features is the function “InsertNavMenu” which looks for all of the html files in the root directory of the webpage (including subdirectories) and inserts the html code for a navigation menu to all of them. You can see an example of such a generated navigation menu to the left of this text. That eliminates my need to maintain a separate file that keeps a record of all the pages in my website.

 

HaimML Specifications

 

HaimML is interpreted by my “HaimML interpreter” program. Every HaimML project is configured by a “build settings” xml file where you can set various settings for how all of the HaimML functions will be interpreted.

The procedure for how HaimML gets interpreted by my program is the following:

1)   First the program goes to the folder that contains all of the site’s code and assets (path to which is set in the “build settings” xml) and copies it into a build folder that it precleans (path to which is also set in “build settings”).

2)   Then the program opens up all “.html” files (or “.htm”) and executes all HaimML functions. After that, a few small technical steps:

a.    The “index” link in the top most directory of the navigation menu (which refers to a page such as “index.html”) has its text replaced with “Home.”

b.    Then any prefixes of “index.html” in the topmost directory is deleted. For example, if the file was called “A&index.html” (see below for an explanation of the prefix “A&”), its name will be replaced by “index.html”

3)   Lastly, the program goes through and deletes all files and folders in the build folder (and its subdirectories) that have a “remove ending,” which are set in “build settings.” For example, I’ve set “_R” as a “remove ending” and so any file or folder such as “SampleFile_R.html” or “SampleFolder_R” gets deleted. The purpose of this is to remove any content that isn’t used in the end result and that just takes up space.

After it’s done, all of the files in the build folder are ready to be given to the service hosting your website.

A note:

§  The program will not look for HaimML functions to execute in directories or files that have “remove endings” since that would be pointless as those directories and files will get removed at the end.

The following is a list of all HaimML functions that I’ve created so far with their descriptions (The HaimML functions themselves disappear in the final product):

·      HaimSiteFunctions.InsertNavMenu: This function goes through all html files in the directory that contains all of the site content (path to which set in “build settings”) and inserts the html code for a nested unordered list of links to the various html pages (i.e. the navigation menu).

o  In “build settings” you can specify endings to files or folders that notifies this search that it needs to ignore them. For example, I set “_I” to be one of my ignore endings and so a file or folder such as “SamplePage_I.html” or “SampleFolder_I” will be ignored in this navigation menu construction.

o  To specify the order in which pages or folders should appear in the navigation menu, you can add a sequence of letters and then the “&” symbol as a prefix to the name of the file or folder. The ordering is then done alphabetically based on that prefix. For example, if I have the files “A&Intro.html” “B&Updates.html” and “C&Credits.html” then their order in the navigation menu will appear as first “Intro,” then “Updates,” and finally “Credits.” As you can see, the prefix “…&” gets erased from the name that is placed into the navigation menu.

·      HaimSiteFunctions.InsertLiftDir: This function inserts enough “../” to get the path up to the root directory. For example, if the page is located in the directory “/SampleFolder/SampleSubfolder,” then this function inserts “../../” Two copies of “../” because this file is two subdirectories deep.

·      (HaimSiteFunctions.InsertCurrentPageName): This function inserts the name of the current html file. For example, “A&Intro.html” and “Updates.html” give “A&Intro” and “Updates” respectively (note that the prefix “A&” was preserved in the first case).

·      (HaimSiteFunctions.InsertCurrentPageNameWithoutOrderPrefix): This function inserts the name of the html file without any “…&” prefix that it may have, such as the type described above. For example, “A&Intro.html” and “Updates.html” give “Intro” and “Updates” respectively.

·      HaimSiteFunctions.InsertHTMLPage(“Insert Path”): This function inserts the text in the file with the path that’s placed in the quotation marks in this function.

·      HaimSiteFunctions.InsertDate: This function inserts today’s date.

·      HaimSiteFunctions.DeleteAllHtmlComments: This function deletes all html comments “<!-- … -->” in the current file except those which have the HaimML protect command sitting inside of them (see next function). However, this function does not delete any text of the form “<!-- … -->” sitting inside of “<style>…</style>” or “<script>…</script>” tags because those by convention are still read by the browser (see this and this stack exchange answer for good explanations for why). This function is executed after all other HaimML functions are executed.

·      HaimSiteFunctions.ProtectHtmlComment: If you place this function into an html comment, then it will prevent it from being deleted by the HaimML “delete all html comments” command (see previous function).

 

Example of HaimML

 

An example of a page source that uses HaimML is the following code that was used to build my “Book Review” page:

Name of File: B&Book Review.html

Source:

<!DOCTYPE html>

<html lang="en">

HaimSiteFunctions.DeleteAllHtmlComments

<head>

<title>(HaimSiteFunctions.InsertCurrentPageNameWithoutOrderPrefix)</title>

<link rel="stylesheet" href="HaimSiteFunctions.InsertLiftDir/NavMenuStyle.css">

<link rel="stylesheet" href="HaimSiteFunctions.InsertLiftDir/StandardPageStyle.css">

</head>

<body>

 

<!-- HaimSiteFunctions.ProtectHtmlComment Math is Awesome! -->

 

<div class="sidenav">

HaimSiteFunctions.InsertNavMenu

</div>

 

<script src="HaimSiteFunctions.InsertLiftDir/NavMenuToggler.js"></script>

 

<div class="main">

HaimSiteFunctions.InsertHTMLPage("(HaimSiteFunctions.InsertCurrentPageName)_Article_R.html")

<br>

<iframe class="PDF_ShowerIframe" src="Z_PDF_Documents_I/Letter to Dr Paul J. Nahin (Final Version).pdf"></iframe>

</div>

 

</body>

</html>

 

Update and Release

 

I plan to do an update on HaimML sometimes in the future. Things that I want to change include shortening my function names, make more use of parameters, think more carefully about what order HaimML functions should be executed in, etc. After that I plan to release this language on GitHub alongside an example website project that uses HaimML.